<template>
    <div class="order-detail-view">
        <div class="page-header">
            <h1>订单详情</h1>
        </div>

        <!-- 加载状态 -->
        <div v-if="loading" class="loading-container">
            <LoadingSpinner />
        </div>

        <!-- 错误状态 -->
        <div v-else-if="error" class="error-container">
            <EmptyState :title="error.title" :description="error.description" :icon="Warning" />
        </div>

        <!-- 订单详情 -->
        <div v-else-if="order" class="order-detail-container">
            <el-card class="order-summary-card">
                <el-descriptions :column="2" border>
                    <el-descriptions-item label="订单号">{{ order.orderNo }}</el-descriptions-item>
                    <el-descriptions-item label="状态">
                        <el-tag :type="getOrderStatusType(order.status)">{{ getOrderStatusText(order.status) }}</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item label="下单时间">{{ new Date(order.createdTime).toLocaleString() }}</el-descriptions-item>
                    <el-descriptions-item label="总积分">
                        <span class="total-points">{{ order.totalPoints }}</span>
                    </el-descriptions-item>
                </el-descriptions>
            </el-card>

            <el-card class="order-items-card">
                <template #header>
                    <div class="card-header">
                        <span>商品信息</span>
                    </div>
                </template>
                <div v-for="item in order.items" :key="item.productId" class="order-item">
                    <img :src="item.productImageUrl" :alt="item.productName" class="item-image" />
                    <div class="item-info">
                        <p class="item-name">{{ item.productName }}</p>
                        <p class="item-points">{{ item.points }} 积分 x {{ item.quantity }}</p>
                    </div>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { getOrderDetail } from '@/api/modules/order'
import type { Order } from '@/types'
import LoadingSpinner from '@/components/base/LoadingSpinner.vue'
import EmptyState from '@/components/base/EmptyState.vue'
import { Warning } from '@element-plus/icons-vue'

const route = useRoute()

const order = ref<Order | null>(null)
const loading = ref(false)
const error = ref<{ title: string; description: string } | null>(null)

// 加载订单数据
const loadOrder = async () => {
    try {
        loading.value = true
        const orderId = route.params.id as string
        order.value = await getOrderDetail(Number(orderId))
    } catch (e: any) {
        if (e.response && e.response.status === 404) {
            error.value = {
                title: '订单不存在',
                description: '您要查找的订单不存在。',
            }
        } else {
            error.value = {
                title: '加载失败',
                description: '获取订单信息失败，请稍后重试。',
            }
        }
        console.error('获取订单详情失败:', e)
    } finally {
        loading.value = false
    }
}

// 获取订单状态文本
const getOrderStatusText = (status: string) => {
    switch (status) {
        case 'pending': return '待支付'
        case 'paid': return '已支付'
        case 'shipped': return '已发货'
        case 'completed': return '已完成'
        case 'cancelled': return '已取消'
        default: return '未知状态'
    }
}

// 获取订单状态标签类型
const getOrderStatusType = (status: string) => {
    switch (status) {
        case 'pending': return 'warning'
        case 'paid': return 'primary'
        case 'shipped': return 'info'
        case 'completed': return 'success'
        case 'cancelled': return 'danger'
        default: return 'info'
    }
}

// 组件挂载时加载数据
onMounted(() => {
    loadOrder()
})
</script>

<style scoped>
.order-detail-view {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
}

.page-header {
    text-align: center;
    margin-bottom: 30px;
}

.page-header h1 {
    color: #333;
    margin-bottom: 10px;
    font-size: 28px;
    font-weight: 600;
}

.loading-container,
.error-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

.order-summary-card,
.order-items-card {
    margin-bottom: 30px;
    border-radius: 8px;
}

.total-points {
    font-weight: 600;
    color: #e6a23c;
}

.card-header {
    font-size: 16px;
    font-weight: 500;
}

.order-item {
    display: flex;
    align-items-center;
    gap: 15px;
    margin-bottom: 15px;
}

.order-item:last-child {
    margin-bottom: 0;
}

.item-image {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
}

.item-info {
    flex: 1;
}

.item-name {
    font-size: 14px;
    color: #333;
    margin-bottom: 5px;
}

.item-points {
    font-size: 12px;
    color: #666;
}
</style>
